<template>
  <div class="dictation-practice">
    <el-skeleton :rows="5" animated v-if="loading" />
    <el-alert v-else-if="error" :title="error" type="error" show-icon :closable="false" />
    <div v-else>
      <MyHeaderInLesson :lesson="lesson" :moduleName="'听写练习'" />

      <AudioControls
        :current-index="currentSentenceIndex"
        :total-items="lesson.content.length"
        :is-playing="isPlaying"
        @previous="playPrevious"
        @toggle-playback="togglePlayback"
        @next="playNext"
        @speed-change="changeSpeed"
      />

      <!-- 句子选择下拉框 -->
      <div class="sentence-selector">
        <el-select v-model="currentSentenceIndex" placeholder="请选择句子" style="width: 100%" class="mosaic-text">
          <el-option
            v-for="(sentence, index) in lesson.content"
            :key="index"
            :label="`${index + 1}. ${sentence.english}`"
            :value="index"
          >
            <div class="sentence-option">
              <span class="sentence-number">{{ index + 1 }}.</span>
              <span class="sentence-text">{{ sentence.english }}</span>
            </div>
          </el-option>
        </el-select>
      </div>

      <!-- 中文翻译显示 -->
      <div class="chinese-translation">
        {{ currentSentence.chinese }}
      </div>

      <!-- 英文句子听写区域 -->
      <div class="dictation-area">
        <h3>请根据听到的内容填写下面的空格</h3>

        <div class="sentence-display">
          <div v-for="(item, index) in sentenceItems" :key="index">
            <span v-if="item.type === 'word'" class="word-item" :style="calcWidth(item.text)">
              <span class="phonetic-text" v-show="showPhonetic">{{ wordPhonetic[item.text] }}</span>
              <el-input
                size="large"
                :ref="`input-${item.wordIndex}`"
                :style="calcWidth(item.text)"
                v-model="userInputs[item.wordIndex]"
                :class="['dictation-input', validationStates[item.wordIndex]]"
                :placeholder="`${item.wordIndex + 1}`"
                @focus="currentFocusedIndex = item.wordIndex"
                @input="(value) => handleInput(value, item.wordIndex)"
              />
            </span>
            <span v-else class="punctuation-item">
              <span class="phonetic-text-null" v-show="showPhonetic">{{ '-' }}</span>
              <span>{{ item.text }}</span>
            </span>
          </div>
        </div>
      </div>

      <!-- 听写练习控制选项 -->
      <div class="dictation-options">
        <el-button @click="playCurrentSentence" class="control-button"> 朗读 </el-button>
        <el-button @click="fillAllWords" class="control-button"> 填写 </el-button>
        <el-button @click="showHint" class="control-button"> 提示 </el-button>
        <el-button @click="resetExercise" class="control-button primary"> 重置 </el-button>
        <el-checkbox
          label="音标"
          v-model="showPhonetic"
          @change="saveShowPhoneticSetting"
          class="control-checkbox"
        ></el-checkbox>
        <el-checkbox v-model="autoAdvance" @change="saveAutoAdvanceSetting" class="control-checkbox">
          自动跳转下一句
        </el-checkbox>
        <span v-show="remainTimeOfNext > -1" class="time-of-next">
          {{ this.remainTimeOfNext }}
        </span>
      </div>

      <!-- 完成提示 -->
      <div v-if="isCompleted" class="completion-message">
        <el-alert title="恭喜！您已完成此句的听写练习！👍👍👍" type="success" show-icon center />
      </div>
      <KeyQuick :keys="['ctrl', 'left', 'enter', 'right', '[']" />
    </div>
  </div>
</template>

<script>
import AudioControls from '../components/text-study/AudioControls.vue'
import { ElSkeleton, ElAlert, ElPageHeader, ElButton, ElInput, ElCheckbox } from 'element-plus'
import { lessonLoader } from '../mixins/lessonLoader.js'
import MyHeaderInLesson from '../components/layout/MyHeaderInLesson.vue'
import KeyQuick from '../components/text-study/KeyQuick.vue'
import { dictationPracticeMixin } from '../mixins/dictationPractice.js'

export default {
  name: 'DictationPractice',
  components: {
    AudioControls,
    ElSkeleton,
    ElAlert,
    ElPageHeader,
    ElButton,
    ElInput,
    ElCheckbox,
    MyHeaderInLesson,
    KeyQuick
  },
  mixins: [lessonLoader, dictationPracticeMixin]
}
</script>

<style scoped lang="scss">
@use '../assets/styles/dictationPractice.scss';
</style>
